<script>
import axios from "axios";

export default {
  data() {
    return {
      IsLogin: false,
      userName:"",
      userPwd:"",
    }
  },
  methods: {
    userLogin() {
      console.log("userLogin");
      const formData={
        userName:this.userName,
        userPwd:this.userPwd,
      }
      axios.post("http://localhost:8080/userLogin", formData).then(res => {
        console.log(res.data.data);
        if(res.data.code==0){
          localStorage.setItem("token",res.data.data);
          this.IsLogin=!this.IsLogin;
        }
      })

    },
    outLogin() {
      localStorage.removeItem("token");
      this.IsLogin=false;
    },

  },
  mounted() {
    let token = localStorage.getItem("token");
    if (token) {
      this.IsLogin=true;
    }
  }
}
</script>

<template>
  <div v-if="!IsLogin" class="z-50  bg-gray-500/40 w-full h-full absolute flex justify-center items-center">
    <div class="bg-slate-500 w-96 h-96 flex flex-col items-center shadow-2xl rounded-2xl">
     <input v-model="userName" placeholder="请输入用户名" class="w-2/3 mt-12"
            style="outline-style: none; border: 1px solid #ccc;padding: 4px 0px;
            border-radius: 3px;
            font-size: 24px;
            font-weight: 700;
     ">
      <input v-model="userPwd" placeholder="请输入密码" class="w-2/3 mt-12"
             style="outline-style: none; border: 1px solid #ccc;padding: 4px 0px;
            border-radius: 3px;
            font-size: 24px;
            font-weight: 700;
     ">
      <div class="mt-11 bg-gray-400 text-4xl w-40 text-center rounded-3xl hover:bg-gray-500"  @click="userLogin">点击登陆</div>
      <div class="mt-5 hover:underline hover:cursor-pointer">没有账号？点击注册</div>
      <a href="backManage.html"><div class="mt-10 hover:underline hover:cursor-pointer">进入后台</div></a>
    </div>

  </div>
<div class="bg-gray-600/40 w-full h-screen flex items-center justify-center rounded-xl">

<div class="w-3/6 h-[calc(100%-5%)] rounded-xl shadow-2xl">
<div class="h-[calc(10%)] bg-gray-500 text-center flex items-center justify-center relative rounded-t-xl">
  <div class="text-4xl w-60 ">贷款审批系统</div>
  <div class="absolute right-10 bg-gray-800/60 text-white rounded-2xl w-32" v-if="IsLogin" @click="outLogin">已登陆</div>
</div>
<!--<div class="h-[calc(80%)] bg-red-400 flex flex-wrap">-->
<!--  <div class="w-1/4 border-2 h-1/3 m-12 ml-16">1</div>-->
<!--  <div class="w-1/4 border-2 h-1/3 mt-12">2</div>-->
<!--  <div class="w-1/4 border-2 h-1/3 m-12 ">3</div>-->
<!--  <div class="w-1/4 border-2 h-1/3 m-12 ml-16">4</div>-->
<!--  <div class="w-1/4 border-2 h-1/3 mt-12">5</div>-->
<!--  <div class="w-1/4 border-2 h-1/3 m-12">6</div>-->
<!--</div>-->
  <router-view></router-view>
</div>
</div>
</template>

